<template>
	<view>
		<tt-bar title="考勤详情" leftIcon="icon-back"></tt-bar>
		<view class="latelyBox">
			<text class="lateleTitle" v-if="csDate">{{csDate}} {{week}} {{ (csTime&&edTime)?(csTime+'-'+edTime):'' }}</text>
			<text >班级：{{cname}}</text>
			<text>课程：{{gname}}</text>
			<text >老师：{{tname}}</text>
			<text >教室：{{sroom}}</text>
			
		</view>
		<view class="editBar" @tap="toElt"  >
			<image src="../../static/icon-flower.png"></image>
			<text class="label">评价学员</text>
			<text class="value">{{eltNum}}人未评价</text>
			<text class="iconfont icon-right"></text>
		</view>
		<text class="scrollTitle">学员签到详情</text>
		<scroll-view class="studentList"  scroll-y="true"  :style="{'height':scHeight+'px'}">
			<view class="scList">
				<view class="studentRow" v-for="(item,index) in studentList" :key="index" @tap="editWork(index)">
					<text class="studentName">{{item.name}}</text>
					<text class="workStatus">{{workArr[item.status]}}</text>
					<text class="iconfont icon-right"></text>
				</view>

			</view>
			<emptyBox v-if="studentList.length<1" type="student"></emptyBox>
		</scroll-view>
		
		<editCk ref="editCk" title="考勤修改" :student="tapStudent"></editCk>
		
	</view>
</template>

<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import emptyBox from "../../components/emptyBox/emptyBox.vue";
	import API from "@/common/api.js";
	import TL from '@/common/tool.js';
	import {mapState} from "vuex";
	import editCk from "../../components/editCk/editCk.vue";
	export default {
		components: {
			ttBar,
			emptyBox,
			editCk
		},
		computed:{
			...mapState({
				userInfo:state=>state.user.userInfo,
				selectShop:state=>state.shop.selectShop,
			})
			
		},
		data() {
			return {
			
				scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(558),
				cid: '',
				cname: '',
				gname:'',
				sroo:'',
				tname:'',
				workArr:['','签到','请假','缺勤','补课'],
				latelyData: {
					data: '',
					time: '',
					qiandao: 0,
					qingjia: 0,
					queqin: 0
				},
				studentList: [],
				postStudent: [],
				btid: '',
				csDate:'',
				csTime:'',
				edTime:'',
				tapStudent:null,
				eltNum:0,
				week:''
			};
		},
		methods: {
			getData() {
				let _this = this;
				API.getCheckWorkDetail(this.btid).then(res => {
					this.studentList = res.data.data;
					this.csDate=res.data.data[0].date?res.data.data[0].date:'';
					this.week=TL.datePattern(TL.strToDate(this.csDate),'EE')
					this.csTime=res.data.data[0].begin;
					this.edTime=res.data.data[0].end;
					_this.postStudent=[];
					res.data.data.forEach(function(v, i) {
						_this.postStudent.push({
							id: v.id,
							status: v.status
						})
					});
					API.apiGetEvaluateList({batch_id:this.btid}).then(eltRes=>{
						let _sum=0;
						eltRes.data.data.forEach(x=>{
							if(x.memoStatus==1){
								_sum++;
							}
						})
						
						this.eltNum=res.data.data.length-_sum
					});
				})
				API.getClassCheckListById(this.cid).then(res => {
					if (res.data.data.length > 0) {
						this.latelyData = this.dataChange(res.data.data)[0].data[0]
					} else { //如果没有学员

					}
				});
				
			},
			dataChange(data) {

				data = data.groupArr("batch_id");

				data.forEach(function(item, val) {
					item.date = item.group.substr(2, 4) + '-' + item.group.substr(6, 2) + '-' + item.group.substr(8, 2);
					item.time = item.group.substr(10, 2) + ':' + item.group.substr(12, 2) + ':' + item.group.substr(14, 2);
				})

				return data.groupArr("date");

			},
			editWork(e){
				let _index=parseInt(e);
				this.tapStudent=this.studentList[_index];
				setTimeout(()=>{
					if(this.tapStudent.status==4){
						uni.showToast({
							title: '补课考勤无法修改',
							icon: 'none'
						});
					}else{
						this.$refs.editCk.show();
					}
				},200)
				
			},
			toElt(){
				if(this.csDate){
					uni.setStorageSync("csDate",this.csDate+' '+this.csTime+'-'+this.edTime);
				}else{
					uni.setStorageSync("csDate",'');
				}
				this.toPage({
					url:"evaluateList",
					btid:this.btid,
					cname:this.cname,
					gname:this.gname,
					tname:this.tname,
					sroom:this.sroom,
					csdate:this.studentList[0].date?this.studentList[0].date:'',
					cstime:this.studentList[0].begin?this.studentList[0].begin:'',
					edtime:this.studentList[0].end?this.studentList[0].end:'',
				})
			},
			
		},
		onLoad(cfm) {
			this.btid = cfm.btid
			if(uni.getStorageSync("classInfo")){
				let _classInfo=uni.getStorageSync("classInfo");
				this.cid = _classInfo.classId;
				this.cname=_classInfo.className;
				this.gname=_classInfo.goodName;
				this.sroom=_classInfo.classRoom;
				this.tname=_classInfo.teacherName;
				this.week=_classInfo.week;
				this.getData();
			}
			
			uni.$on("upList",payload=>{
				this.getData();
			})
		},
		onPullDownRefresh() {
			setTimeout(()=>{
				this.getData()
				uni.stopPullDownRefresh();
			},1500)
		}
	}
</script>

<style lang="less">
	page {
		background-color: #f6f6f6;
	}
	.editBar{
		height: 110upx;
		display: flex;
		align-items: center;
		background-color: #FFFFFF;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10rpx;
		margin: 0 20upx;
		padding: 0 30upx;
		
		image{
			width: 66upx;
			height: 66upx;
			margin-right: 20upx;
		}
		.label{
			font-size: 36upx;
			flex-grow: 1;
		}
		.value{
			font-size: 32upx;
			color: #909090;
		}
		.iconfont{
			font-size: 36upx;
			color: #c6c6c6;
			margin-left: 20upx;
		}
	}
	.scrollTitle{
		font-size: 28upx;
		height: 40upx;
		line-height: 40upx;
		padding: 0 28upx;
		display: block;
		margin-top: 28upx;
	}
	.ckRow{
		background-color: #FFFFFF;
		height: 90upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f6f6f6;
		padding: 0 38upx;
		.iconfont:first-child{
			font-size: 44upx;
			color: #8c8bad;
			margin-right: 10upx;
		}
		.label{
			font-size: 32upx;
			color: #5b5b5b;
			flex-grow: 1;
		}
		.value{
			font-size: 32upx;
			color: #909090;
		}
		.iconfont:last-child{
			color: #909090;
			font-size: 32upx;
			margin-left: 20upx;
		}
		
	}
	.rightBox {
		display: flex;
		align-items: center;
		height: 90upx;
		text{
			flex-shrink: 0;
		}
	}

	.rightIcon {
		width: 35upx;
		height: 35upx;
		margin-right: 10upx;
	}

	.rightText {
		color: #8483a4;
		font-size: 28upx;
	}

	.latelyBox {
		display: flex;
		flex-direction: column;
		padding: 0upx 38upx;
		justify-content: center;
		color: #222222;
		background-color: #FFFFFF;
		height: 250upx;
		overflow: hidden;
		margin: 20upx 0 ;
		text {
			font-size: 28upx;
			color: #666666;
		}
		.lateleTitle{
			font-size: 32upx;
			margin-bottom: 16upx;
			color: #222222;
		}
		
	}

	.tabBar {
		height: 96upx;
		display: flex;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;

		text {
			display: inline-block;
			box-sizing: border-box;
			font-size: 32upx;
			color: #5b5b5b;
			height: 96upx;
			line-height: 96upx;
			border-bottom: 8upx solid rgba(0, 0, 0, 0);
		}

		.line {
			width: 3rpx;
			height: 36rpx;
			background-color: #efefef;
			margin: 100upx;
		}

		.active {
			color: #fba121;
			border-bottom: 8upx solid #fbc521;
		}
	}

	.scList {
		padding: 28upx 20upx;
		display: flex;
		flex-direction: column;

		.studentRow {
			display: flex;
			align-items: center;
			height: 110upx;
			background-color: #ffffff;
			box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
			border-radius: 10rpx;
			padding-left: 38upx;
			padding-right: 24upx;
			margin-bottom: 20upx;

			.studentName {
				font-size: 28rpx;
				color: #5b5b5b;
				flex: 1;
			}
			.workStatus{
				font-size: 28upx;
				color: #5b5b5b;
			}
			.iconfont{
				font-size: 32upx;
				margin-left: 20upx;
				color: #c6c6c6;
			}

			.btn {
				width: 110rpx;
				height: 78upx;
				border-radius: 10upx;
				border: solid 3upx #a6a3c0;
				text-align: center;
				box-sizing: border-box;
				line-height: 72upx;
				font-size: 28upx;
				color: #a6a3c0;
				margin-left: 28upx;
			}

			.active {
				background-color: #fbc521;
				border: solid 3upx #fbc521;
				color: #FFFFFF;
			}
		}
	}

	.ani {
		height: 0;
	}

	.btmFiexBtn {
		position: fixed;
		width: 100%;
		height: 120upx;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;

		button {
			width: 496upx;
			height: 80upx;
			background-color: #ffb423;
			border-radius: 40rpx;
			border: none;
			line-height: 80upx;
			color: #FFFFFF;
		}

		button:after {
			border: none;
		}
	}
</style>
